<template>
	<el-container direction="vertical">
		<SearchForm :columns="formColumn" @search="search" @reset="search" />
		<!-- <el-header>
      <div class="left-panel">
        <el-button icon="el-icon-download">导出</el-button>
      </div>
    </el-header> -->
		<el-main class="nopadding">
			<scTable
				ref="table"
				tableName="stuApprovedList"
				v-bind="list"
				row-key="id"
				stripe
				:vritualData="vritualData"
				:setUpType="false"
				:hidePropOrder="true"
			>
				<!-- <el-table-column type="selection" width="50"></el-table-column> -->
				<el-table-column
					label="操作"
					width="120"
					fixed="right"
					align="center"
				>
					<template #default="scope">
						<el-button
							type="primary"
							plain
							size="small"
							@click="viewDetail(scope.row)"
						>
							查看
						</el-button>
					</template>
				</el-table-column>
			</scTable>
			<GraduateDialog ref="graduateDialogRef" :viewType="1" />
		</el-main>
	</el-container>
</template>

<script>
import SearchForm from "@/components/SearchForm/index.vue";
import GraduateDialog from "./GraduateInfo.vue"

export default {
	components: {
		SearchForm,
		GraduateDialog
	},
	data() {
		return {
			formColumn: [
				{
					component: "el-input",
					label: "学员姓名",
					prop: "studentName"
				},
				{
					component: "el-input",
					label: "联系电话",
					prop: "phone"
				}
			],
			list: {
				apiObj: this.$API.student.graduate,
				params: {},
				column: [
					{
						label: "学员姓名",
						prop: "studentName",
						width: ""
					},
					{
						label: "班别名称",
						prop: "className",
						width: ""
					},
					{
						label: "课次",
						prop: "times",
						width: ""
					},
					{
						label: "开班时间",
						prop: "starTime",
						width: ""
					},
					{
						label: "结班时间",
						prop: "endTime",
						width: ""
					},
					{
						label: "校区",
						prop: "schoolName",
						width: ""
					},
					{
						label: "联系电话",
						prop: "phone",
						width: ""
					},
					{
						label: "证书编号",
						prop: "bookNo",
						width: ""
					},
					{
						label: "是否已领取证书",
						prop: "bookNo",
						width: ""
					}
				]
			},
			vritualData: [{ studentName: "123" }]
		}
	},
	methods: {
		viewDetail(row) {
			console.log(row)
			this.$refs.graduateDialogRef.openDialog()
		},
		search(searchParams) {
			let params = {}
			if (searchParams) {
				const searchObj = JSON.parse(JSON.stringify(searchParams))
				params =  Object.assign({}, searchObj, this.list.params)
			}else{
				params = Object.assign({}, this.list.params, {});
			}
			console.log(params)
			this.$refs.table.reload(params)
		}
	}
}
</script>

<style scoped lang="scss">
.attend {
	& > div {
		display: flex;
		align-items: center;
	}
	.poin {
		width: 14px;
		height: 14px;
		background-color: #1ada82;
		border-radius: 50%;
		margin-right: 8px;
		display: inline-block;
	}
	.poin1 {
		background-color: #ff4a3f;
	}
	.poin2 {
		background-color: #ffcb3f;
	}
}
</style>
